<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <form @submit.prevent = "handleSubmit">
            <span>用户名：</span>
            <input type="text" v-model="username">
            <br>
            <span>密码：</span>
            <input type="password" v-model="password">
            <br>
            <span>性别：</span>
            <input name="gender" type="radio" id="female" value="女" v-model="gender"><label for="female">女</label>
            <input name="gender" type="radio" id="male" value="男" v-model="gender"><label for="male">男</label>
            <br>
            <span>爱好：</span>
            <input type="checkbox" id="basket" value="篮球" v-model="likes"><label for="basket">篮球</label>
            <input type="checkbox" id="foot" value="足球" v-model="likes"><label for="foot">足球</label>
            <input type="checkbox" id="ping-pong" value="乒乓球" v-model="likes"><label for="ping-pong">乒乓球</label>
            <br>
            <span>城市：</span>
            <select v-model="cityId">
                <option value="">未选择</option>
                <option :value="city.id" v-for="(city,index) in allCities" :key="index">
                    {{city.name}}
                </option>
            </select>

            <br>
            <span>简介：</span>
            <textarea v-model="des"></textarea>
            <br>
            <input type="submit" value="提交">
        </form>
    </div>

    <script>
        const app = new Vue({
            el: '#demo',
            data: {
                username: '',
                password: '',
                gender: '女', //跟value匹配
                likes: ['足球'], //跟value匹配
                allCities: [
                    {id: 1, name:'北京'},
                    {id: 2, name:'上海'},
                    {id: 3, name:'深圳'},
                    {id: 4, name:'重庆'},
                 ],
                cityId: '1', //跟value匹配
                des: ''
            },
            methods:{
                handleSubmit(){
                   console.log(this.username, this.password, this.gender, this.likes, this.cityId,this.des);
                }
            }
        });

    </script>
</body>
</html>